import hljs from 'highlight.js';

async function getServerSideProps(context) {
  const res = await fetch('http://localhost:3000/api' + context.resolvedUrl);
  const data = await res.json();

  return { props: { data } };
}

function MidSection(props) {
  return (
    <div className="h-16 p-8">
      {props.children}
    </div>
  );
}

function MainContentContainer(props) {
  return (
    <div className="border border-slate-400 rounded-lg p-8">
      {props.children}
    </div>
  );
}

function BreadCrumbTrail(props) {
  const pathArray = props.pathArray;
  
  const recursion = (acc) => {
    if (acc.length === pathArray.length) {
      return acc;
    } else {
      const subArray = pathArray.slice(0, acc.length + 1);

      const breadCrumb = {
        name: pathArray[acc.length],
        href: '/' + subArray.join('/'),
      };

      const newAcc = acc.concat([breadCrumb]);
      return recursion(newAcc);
    }
  };

  const breadCrumbs = recursion([]);

  return (
    <div>
      {breadCrumbs.map((breadCrumb) => (
        <el>/ <a href={breadCrumb.href}>{breadCrumb.name}</a> </el>
      ))}
    </div>
  );
}

function LineNos(props) {
  const count = props.textBlob.split('\n').length;
  const lineNos = [...Array(count).keys()].map((x) => x + 1).join('\n');

  return (
    <pre className="text-right text-slate-400">
      {lineNos}
    </pre>
  );
}

function CodeBlock(props) {
  const highlightedHTML = hljs.highlightAuto(props.textBlob).value;
  
  return (
    <pre>
      <code dangerouslySetInnerHTML={{ __html: highlightedHTML }} />
    </pre>
  );
}

function TextDisplayGrid(props) {
  return (
    <div className="flex">
      <div className="overflow-x-auto"><CodeBlock textBlob={props.textBlob} /></div>
      <div className="pr-8 order-first"><LineNos textBlob={props.textBlob} /></div>
    </div>
  );
}

function PageSubstance({ data }) {
  switch (data.resultType) {
    case 'treeContents':
      const treeContents = data.resultContent.trees.concat(data.resultContent.blobs);
    
      return (
        <div>
          <MidSection>
            <BreadCrumbTrail pathArray={data.resultPath} />
          </MidSection>
          <MainContentContainer>
            <ul>
              {treeContents.map((item) => (
                <li><a href={'/' + data.resultPath.join('/') + '/' + item}>{item}</a></li>
              ))}
            </ul>
          </MainContentContainer>
        </div>
      );
      
      break;
    case 'textBlob':
      return (
        <div>
          <MidSection>
            <BreadCrumbTrail pathArray={data.resultPath} />
          </MidSection>
          <MainContentContainer>
            <TextDisplayGrid textBlob={data.resultContent} />
          </MainContentContainer>
        </div>
      );

      break;
    case 'binaryBlob':
        return (
          <div>
            <MidSection>
              <BreadCrumbTrail pathArray={data.resultPath} />
            </MidSection>
            <p>Binary content cannot be displayed.</p>
          </div>
        );
  
        break;
    case 'error':
      return (
        <div>
          <h1>Error:</h1>
          {data.resultContent}
        </div>
      );

      break;
  }
}

function Main({ data }) {
  return (
    <div>
      <header className="h-48 bg-slate-100 border-b border-slate-400"></header>
      <main>
        <div className="container mx-auto">
          <PageSubstance data={data} />
        </div>
      </main>
      <footer className="h-48"></footer>
    </div>
  );
}

export { getServerSideProps };
export default Main;